<template>
	<view class="ts-part">
		<!-- 底部按钮部分 -->
		<view class="ts-btnBox" v-if="requestEnd">
			<view class="text-tip-block" v-if="tsInfo.selectionEnabled && specialStatus == 2 ">
				<image style="width:32rpx; height: 32rpx;display: inline-block;margin-right: 24rpx;"
					src="https://100000063-1252208446.file.myqcloud.com/images/MF-EB-P4/icon@2x (1).png"
					mode="widthFix"></image>
				<view class="text-tip" v-if="checkStaus == 1">
					本次登记将在
					<u-count-down color='#b0b0b0' separator-color='#b0b0b0' :timestamp="checkTime" :show-days="true"
						:show-hours="true" separator="zh" font-size='28'></u-count-down>
					截止
				</view>
				<view class="text-tip" v-else-if="checkStaus == 2">
					登记结果将在
					<u-count-down color='#b0b0b0' separator-color='#b0b0b0' :timestamp="proTime" :show-days="true"
						:show-hours="true" separator="zh" font-size='28'></u-count-down>
					后公布
				</view>
				<view class="text-tip" v-else>
					{{textTip}}
				</view>
			</view>
			<view class="text-tip-block" v-if="!tsInfo.selectionEnabled && textTip && specialStatus < 2">
				<image style="width:32rpx; height: 32rpx;display: inline-block;margin-right: 24rpx;"
					src="https://100000063-1252208446.file.myqcloud.com/images/MF-EB-P4/icon@2x (1).png"
					mode="widthFix"></image>
				<view class="text-tip" >
					{{textTip}}
				</view>
			</view>
			<view class="left-icon " :class="fastTabCopy.length !== 1?'':'short'">
				<view class="icon-item" v-for="(item, tabIndex) in fastTabCopy" :key="tabIndex">
					<view class="new-icon-image" @click="fastTabClick(item, tabIndex)" v-if="item.type!=='adviser'">
						<image style="width:64rpx; height: 64rpx" :src="item.isAct ? item.actIcon : item.icon"
							mode="widthFix">
						</image>
					</view>
					<button v-if="item.type=='adviser'" @click="fastTabClick(item, tabIndex)" open-type="contact"
						show-message-card="true" size="20" class="kf_button" style="background-color:transparent">
					</button>
					<text v-if="cartNum !== 0 && item.type == 'cart'" class="number">{{ cartNum }}</text>
					<view class="left-icon-title">{{ item.title }}</view>
				</view>
			</view>
			<button class="right-btn" :class="isTip? 'new-btn-sell-out':'act'" v-if="specialStatus == 1"
				@click.stop="setTip">{{isTip? '已设置提醒':'订阅活动提醒'}}</button>
			<view class="bottom-content-box" v-else-if="specialStatus == 2">
				<view class="right-btn "
					v-if="(btnStatus == 1  && !tsInfo.selectionEnabled) || (btnStatus == 1 && tsInfo.selectionEnabled && checkStaus == 3 )">
					<button class="new-btn-sell-out"> 商品已售罄</button>
				</view>
				<view class="right-btn "
					v-else-if="(btnStatus == 4 && !tsInfo.selectionEnabled) || (btnStatus == 1 && tsInfo.selectionEnabled && checkStaus == 3 )">
					<button class="new-btn-sell-out"> 商品已下架</button>
				</view>
				<view class="right-btn" v-else>
					<!-- 开启登记获取购买资格 -->
					<view class="check-btnStyle" v-if="tsInfo.selectionEnabled">
						<button class="btn1 font32 "
							:class="(checkStaus == 2 || checkStaus== 4)? 'new-btn-sell-out':'act'"
							@click='handleBtn(checkBtnText)'>{{checkBtnText}}</button>
					</view>
					<view class="normal-btnStyle" v-else>
						<button class="ts-btn1" @click.stop="takeCart" data-type="buynow">加入购物袋</button>
						<button class="ts-btn2" @click.stop="buyItNow" data-type="buynow">立即购买</button>
					</view>

				</view>
			</view>
			<button class="right-btn new-btn-sell-out" v-else-if="specialStatus == 3">{{btnText}}</button>
			<button class="right-btn new-btn-sell-out" v-else>活动已结束</button>
		</view>
		<!-- 弱提示 弹窗 -->
		<toast-popup ref="toastPopup" @onToastPopupClick="onToastPopupClick"></toast-popup>
	</view>
</template>
<script module="filterChecked" lang="wxs" src="@/utils/filter.wxs"></script>
<script>
	import {
		SYSTEM_INFO,
		MERCHANT_INFO,
		USER_INFO,
		USER_SPECICAL_INFO,
		CUSTOMER_INFO,
		CART_KEY
	} from '@/utils/constant';
	import api from '@/api/api';
	import util from '@/utils/util';
	import {
		setFav
	} from '@/utils/commonActItems.js'
	export default {
		data() {
			return {
				specialStatus: 0, //1.尚未开售 2.立即购买
				btnText: '',
				requestEnd: false,
				boxShow: false,
				tsInfo: {},
				chooseQty: 1,
				colorIdx: 0,
				fastTabCopy: [],
				preStartTime: 0,
				startTime: 0,
				endTime: 0,
				promulgateTime: 0,
				checkinCloseTime: 0,
				checkBtnText: '',
				textTip: '',
				checkStaus: 0, // 1-立即登记 2-等待公布结果 3-立即购买 4-登记结束 5-回到首页
				checkTime: 0,
				proTime: 0,
				isTip: false,
				activitySubscribeId: api.environment =='trial'? 192:500,
				timer: null,
				showDate: '',
				timers: []
			}
		},

		watch: {
			specialStatus(val) {
				this.fastTabCopy = this.fastTab
			},
			checkStaus(val) {
				// 1-立即登记 2-等待公布结果 3-立即购买 4-登记结束 5-回到首页
				if (val == 1) {
					this.checkBtnText = '立即登记'
				} else if (val == 2) {
					this.checkBtnText = '等待公布结果'
				} else if (val == 3) {
					this.checkBtnText = '立即购买'
				} else if (val == 4) {
					this.checkBtnText = '登记结束'
				} else if (val == 5) {
					this.checkBtnText = '回到首页'
				}
			}
		},
		props: {
			btnStatus: {
				type: Number
			},
			isSpecial: {
				type: Boolean // TRUE代表商品配置了特殊购买 ，活动结束后有标记就一直显示活动已结束
			},
			productSKU: {
				type: String
			},
			tsActId: {
				typeof: String
			},
			ccJsonInfo: {
				typeof: Object
			},
			colorPriceJson: {
				typeof: Object
			},
			price: {
				type: String
			},
			fastTab: {
				type: Array
			},
			cartNum: {
				type: Number
			},
			detail: {
				type: Object
			},
			valueId: {
				type: String,
			},
			goodsOperateBtn: {
				type: Object
			}
		},
		mounted() {
			let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
			if (!!this.tsActId && !!customerInfo.jwt) {
				// 从订单列表过来的,以订单列表的活动id查询的活动为准
				this.getTsBySku(this.tsActId)
			} else {
				this.getTsBySku(this.tsActId)
			}
		},
		methods: {
			/**
			 * 展示弱提示
			 * @param {Object} msg 文案
			 */
			handleShowTextToast(msg){
				try{
					this.$refs.toastPopup.showToast(msg);
				}catch(e){}
			},
			/**
			 * 若提示按钮点击回调
			 * @param {Object} data.type 类型：confirm确定，cancel取消
			 * @param {Object} data.callBackData 呼气弹窗时传入的数据
			 */
			onToastPopupClick(data){},
			async getTsBySku(tsId) {
				let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
				let merchantInfo = uni.getStorageSync('merchantInfo');
				let memberDetails = uni.getStorageSync('memberDetails');
				let query = {
					"store_id": merchantInfo.cloudMerchantStoreId,
					"sku_id": this.productSKU,
					"group_id": customerInfo.groupId,
					"member_level_id": memberDetails.memberLevelId,
					"merchant_id": merchantInfo.cloudMerchantId,
					'campaign_target_sale_id': tsId || ''
				}
				const result = await api.getTsBySku({
					header: {
						jwt: customerInfo.jwt
					},
					method: 'GET',
					query: query,
				});
				if (result.code == 1000) {
					let {
						teaserStartTime,
						campaignStartTime,
						campaignEndTime,
						promulgateTime,
						checkinCloseTime,
						campaignTargetSaleId,
						status
					} = result.data
					this.tsInfo = result.data

					this.preStartTime = util.formatTimeStamp(teaserStartTime) //预热
					this.startTime = util.formatTimeStamp(campaignStartTime) // 开始
					this.endTime = util.formatTimeStamp(campaignEndTime) //结束
					this.promulgateTime = util.formatTimeStamp(promulgateTime) // 
					this.checkinCloseTime = util.formatTimeStamp(checkinCloseTime) // 等级关闭

					this.$emit('setTsInfo', result.data)
					this.$commonFunction.getServerTime().then((nowTime) => {
						if(nowTime < this.preStartTime || nowTime> this.endTime){
							uni.reLaunch({
							  url: `/pages/home/home?tsActId=${campaignTargetSaleId}`
							})
						}
						return;
					})
					this.$emit('youshuTrack')
					if (status !== -2) {
						this.statusControl()
					} else {
						this.btnText = result.data.illegalNotice
						this.specialStatus = 3
						this.requestEnd = true
					}
				} else {
					if (result.data) {
						let {
							status,
							illegalNotice,
							campaignTargetSaleId
						} = result.data
						if (status == -2) {
							this.specialStatus = 3
							this.btnText = illegalNotice
							
						} else {
							this.specialStatus = 4
						}
						// uni.reLaunch({
						//   url: `/pages/home/home?tsActId=${campaignTargetSaleId}`
						// });
					} else {
						this.specialStatus = 4
						
					}
					uni.reLaunch({
					  url: `/pages/home/home?tsActId=${tsId}`
					});
					this.requestEnd = true
				}
			},
			getFormatDate(timestamp) {
				const date = new Date(timestamp);
				const _month = date.getMonth() + 1;
				const month = _month > 9 ? _month : `0${_month}`;
				const day = date.getDate() > 9 ? date.getDate() : `0${date.getDate()}`;
				const hours = date.getHours() > 9 ? date.getHours() : `0${date.getHours()}`;
				const minutes = date.getMinutes() > 9 ? date.getMinutes() : `0${date.getMinutes()}`;

				return `${month}月${day}日 ${hours}:${minutes}`;
			},
			setTimeOver(endTime, nowTime) {
				//超过一天就不继续监听倒计时了
				if ((endTime - nowTime) < 86400000 * 2) {
					this.timers.push(setTimeout(() => {
						this.statusControl()

					}, endTime - nowTime))
				}
			},
			// 倒计时
			start(timestamp) {
				// 避免可能出现的倒计时重叠情况
				this.clearTimer();
				if (timestamp <= 0) return;
				let seconds = timestamp / 1000
				this.timer = setInterval(() => {
					seconds--;
					// 发出change事件
					if (seconds < 0) {
						return this.end();
					}
					this.formatTime(seconds);
				}, 1000);
			},
			// 格式化时间
			formatTime(seconds) {
				// 小于等于0的话，结束倒计时
				seconds <= 0 && this.end();
				let [day, hour, minute, second] = [0, 0, 0, 0];
				// 判断是否显示“天”参数，如果不显示，将天部分的值，加入到小时中
				// hour为给后面计算秒和分等用的(基于显示天的前提下计算)
				hour = Math.floor(seconds / (60 * 60));
				minute = Math.floor(seconds / 60) - hour * 60 - day * 24 * 60;
				second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60;
				// 如果小于10，在前面补上一个"0"
				hour = hour < 10 ? '0' + hour : hour;
				minute = minute < 10 ? '0' + minute : minute;
				second = second < 10 ? '0' + second : second;
				// this.h = hour;
				// this.i = minute;
				// this.s = second;
				this.textTip = `将于 ${hour}:${minute}:${second} 后开售`
			},
			// 停止倒计时
			end() {
				this.clearTimer();
				this.textTip = ''
			},
			// 清除定时器
			clearTimer() {
				if (this.timer) {
					// 清除定时器
					clearInterval(this.timer);
					this.timer = null;
				}
			},
			// 普通活动状态控制
			async statusControl() {
				try{
				this.textTip = ''
				this.isTip = await this.isSecondRemindRquest()
				this.$commonFunction.getServerTime().then((nowTime) => {
					if (nowTime > this.preStartTime && nowTime < this.startTime) {
						this.specialStatus = 1
						if ((this.startTime - nowTime) < 86400000 * 2) {
							this.start(this.startTime - nowTime)
							this.setTimeOver(this.startTime, nowTime)
						} else {
							let t = this.getFormatDate(this.startTime)
							this.textTip = `将于 ${t} 开售`
						}
					} else if (nowTime > this.startTime && nowTime < this.endTime) {
						this.end()
						this.specialStatus = 2
						// 登记状态
						if (this.tsInfo.selectionEnabled) {
							this.checkStatusControl(nowTime)
						}
						if ((this.endTime - nowTime) < 86400000) {
							setTimeout(() => {
								this.specialStatus = 4
							}, (this.endTime - nowTime))
						}
					} else {
						this.specialStatus = 4
					}
					this.requestEnd = true
				})	
				}catch(e){
					//TODO handle the exception
				}
				
			},
			async fastTabClick(item) {
				if (item.title == '购物袋') {
					uni.navigateTo({
						url: item.path,
					})
				} else {
					let operateType;
					if (item.isAct) {
						operateType = 'cancel'
						let params = {
							c_link_pagename: '商品详情页'
						}
						this.$parent.commonTrack('c_ebmp_wish_list_remove_from_wish_list', params)
					} else {
						this.$parent.commonTrack('c_ebmp_wish_list_add_to_wish_list', {
							c_link_pagename: '商品详情页'
						})
						operateType = 'add'

					}
					let res = await setFav(this.detail, operateType, this.valueId, 0)
					const {
						status,
						times
					} = res
					if (status) {
						this.fastTabCopy.map(item => {
							if (item.title == '喜欢' && operateType == 'add') {
								item.isAct = true
								if (times == 1) {
									this.$parent.openFavModal()
								} else {
									this.handleShowTextToast('添加成功')
								}
							} else if (item.title == '喜欢' && operateType == 'cancel') {
								item.isAct = false
								this.handleShowTextToast('已取消')
							}
						})
					}
				}
			},
			handleBtn(val) {
				if (val == '立即登记' && this.checkStaus == 1) {
					this.$parent.commonTrack('c_ebmp_target_sales_draws_register_to_draws', {})
					this.checkInTs()
				} else if (val == '回到首页') {
					this.$parent.commonTrack('c_ebmp_product_back_to_home_page', {})
					uni.reLaunch({
						url: '/pages/home/home'
					})
				} else if (val == '立即购买' && this.checkStaus == 3) {
					this.buyItNow()
				}
			},
			// 登记
			async checkInTs() {
				let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
				let merchantInfo = uni.getStorageSync('merchantInfo');
				const result = await api.checkInTs({
					header: {
						jwt: customerInfo.jwt
					},
					method: 'POST',
					query: {
						"storeId": merchantInfo.cloudMerchantStoreId,
						"skuId": this.productSKU,
						'campaignTargetSaleId': this.tsInfo.campaignTargetSaleId
					},
				});
				if (result.code === 1000) {
					this.getTsBySku(this.tsActId)
				}
			},
			checkStatusControl(nowTime) {
				let {
					isCheckin,
					selectionInfo,
					promulgateTime,
					checkinCloseTime //登记结束时间
				} = this.tsInfo
				// checkStaus: 0, // 1-立即登记 2-等待公布结果 3-立即购买 4-登记结束 5-回到首页
				let status;
				if (nowTime < this.checkinCloseTime) {
					status = isCheckin ? 2 : 1
					let proTime = util.formatTimeStamp(promulgateTime) - nowTime
					this.proTime = proTime / 1000
					let checkTime = util.formatTimeStamp(checkinCloseTime) - nowTime
					this.checkTime = checkTime / 1000
					if (isCheckin) {
						this.timeOver(proTime, 1)
					} else {
						this.timeOver(checkTime)
					}

				} else if (nowTime > this.checkinCloseTime && nowTime < this.promulgateTime) {
					if (!isCheckin) {
						status = 4
						this.textTip = `本次登记已在${this.$parent.formatDate(checkinCloseTime)}结束，期待您下次参与`
					} else {
						let proTime = util.formatTimeStamp(promulgateTime) - nowTime
						this.proTime = proTime / 1000
						status = 2
						this.timeOver(proTime, 1)
					}
				} else if (nowTime > this.promulgateTime) {
					if (!isCheckin) {
						status = 4
						this.textTip = `本次登记已在${this.$parent.formatDate(checkinCloseTime)}结束，期待您下次参与`
					} else if (isCheckin && selectionInfo.selectionRecordStatus == 2) {
						status = 5
						this.textTip = '很遗憾，您未获取购买资格'
					} else if (isCheckin && selectionInfo.isLucky == 1) {
						this.textTip = '恭喜您获取购买资格'
						status = 3
					}
				}
				this.checkStaus = status
			},
			timeOver(cuttime, type) {
				if (cuttime < 86400000) {
					setTimeout(() => {
						if (!!type) {
							this.getTsBySku(this.tsActId)
						} else {
							this.statusControl()
						}
					}, cuttime);
				}
			},

			buyItNow: async function() {
				if (this.chooseQty > this.tsInfo.availableQty) {
					this.handleShowTextToast('已超出限购数量，详情请咨询顾问');
				} else {
					this.$parent.tianYuCheck(3)
				}
			},
			takeCart() {
				if (this.chooseQty > this.tsInfo.availableQty) {
					this.handleShowTextToast('已超出限购数量，详情请咨询顾问');
				} else {
					this.$parent.takeCart()
				}
			},
			getTrackStatus() {
				let text = '';
				if (this.specialStatus == 1) {
					text = '商品尚未开售'
				} else if (this.specialStatus == 2 && this.tsInfo.selectionEnabled) {
					if (this.checkStaus == 1) {
						text = '已开始未登记'
					} else if (this.checkStaus == 4) {
						text = '登记结束'
					} else if (this.checkStaus == 2) {
						text = '等待公布结果'
					} else if (this.checkStaus == 3) {
						text = '已获取购买资格'
					} else if (this.checkStaus == 5 && this.tsInfo.isCheckin) {
						text = '未获取购买资格'
					}

				} else if (this.specialStatus == 4) {
					text = '活动已结束'
				}
				return text
			},
			setTip() {
				if (!this.isTip) {
					this.remindRequest()
				}

			},

			async startDrawMessage() {
				let pageid =  await api.getUtoolsJsonByActivity({type: 'CategoryPlpTs', activityId: this.tsInfo.campaignTargetSaleId})
				let userSpecialInfo = uni.getStorageSync(USER_SPECICAL_INFO);
				const accountInfo = uni.getAccountInfoSync()
				let customerInfo = uni.getStorageSync(CUSTOMER_INFO) || getApp().globalData.customerInfo;
				let page = `/pages/item/item?id=${this.goodsId}&valueId=${this.valueId}&valueName=${this.colorName}`
				if (customerInfo) {
					let res = await api.sendSubMessage({
						method: 'POST',
						header: {
							jwt: customerInfo.jwt
						},
						query: {
							 name: "活动模版消息",
							appId: accountInfo.miniProgram.appId,
							openId: userSpecialInfo.openid,
							 type: "活动消息",
							params: {
								campaignTargetSaleId: this.tsInfo.campaignTargetSaleId,
								pageId: pageid?.data?.utoolsId,
								activitySubscribeId:  this.activitySubscribeId
							},
						},
					});
					if (res.code == 1000) {
					
							this.handleShowTextToast('订阅成功');
					
						this.statusControl()
						return true
					} else {
				
						this.handleShowTextToast(res.msg)
						return false
					}
				}
			},
			//开售提醒查询
			async isSecondRemindRquest() {
				let pageid =  await api.getUtoolsJsonByActivity({type: 'CategoryPlpTs', activityId: this.tsInfo.campaignTargetSaleId})
				let userSpecialInfo = uni.getStorageSync(USER_SPECICAL_INFO);
				const accountInfo = uni.getAccountInfoSync()
				let customerInfo = uni.getStorageSync(CUSTOMER_INFO) || getApp().globalData.customerInfo;
				let res = await api.getSaleMessage({
					method: 'POST',
					header: {
						jwt: customerInfo ? customerInfo.jwt : ''
					},
					query: {
						 name: "活动模版消息",
						appId: accountInfo.miniProgram.appId,
						openId: userSpecialInfo.openid,
						type: "活动消息",
						params: {
							campaignTargetSaleId: this.tsInfo.campaignTargetSaleId ,
							pageId: pageid?.data?.utoolsId,
							activitySubscribeId:  this.activitySubscribeId
							
						},
					},
				})
				if (res.code !== 1000) {
					return false
				} else {
					return true
				}
			},
			//开售提醒订阅
			async remindRequest() {
				let that = this
				// let templateId = ['3biNaYhS0dwQKynRfig5SI5ZEb_RVewTSAd0PE1CqgE'];
				let templateId = ['bO3U1o2yriZR8917rE0p2NDCps1lSH-yWiiCVvFu4Zw'];

				that.$commonSensors.popupEvent('PopupExposure', {
					'popup_type': '订阅消息',
					'popup_name': '订阅消息弹窗'
				})
				that.$commonSensors.modelAuthAsk('活动', templateId)
				uni.requestSubscribeMessage({
					tmplIds: templateId,
					success(res) {
						if (res['bO3U1o2yriZR8917rE0p2NDCps1lSH-yWiiCVvFu4Zw'] == "accept") {
							that.startDrawMessage(1)

						} else {
							
						}
					},
					fail(res) {
						// that.startDrawMessage()
					},
					complete(res) {
						
					}

				});
			},
		}
	}
</script>

<style lang="scss">
	.new-btn-sell-out {
		border-radius: 24px 8px 24px 24px;
		color: #757575 !important;
		background-color: #C6C6C6 !important;
		font-size: 28rpx;
		font-family: FrankNew-Medium,NotoSansSC-Medium ;
	}

	.font32 {
		font-size: 32rpx;
	}

	.left-icon {
		display: flex;
		width: 260rpx;

		&.short {
			width: 150rpx;
		}

		.kf_button {
			// border-radius: 50%;
			overflow: hidden;
			background-image: url(https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/pdp/Help.png);
			background-size: 64rpx 64rpx;
			background-position: center;
			background-repeat: no-repeat;
			width: 64rpx;
			height: 64rpx;
			padding-left: 0;
			padding-right: 0;
			margin-left: 0;
			display: inline-block;
			margin-right: 0;
			margin: 0 0 -6rpx;
		}

		;

		.icon-image {
			height: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.icon-item {
			text-align: center;
			position: absolute;

			// .number {
			//   position: absolute;
			//   right: 32rpx;
			//   top: 2rpx;
			//   color: #fff;
			//   width: 30rpx;
			//   height: 30rpx;
			//   line-height: 30rpx;
			//   padding: 0;
			//   border-radius: 100%;
			//   text-align: center;
			//   font-size: 20rpx;
			//   background-color: #000;
			// }

			.number {
				position: absolute;
				right: 21rpx;
				top: 24rpx;
				color: #000;
				width: 22rpx;
				height: 14rpx;
				line-height: 30rpx;
				padding: 0;
				// border-radius: 100%;
				text-align: center;
				font-size: 14rpx;
				font-family: 'FrankNew-Regular';
				// background-color: #CB171A;
			}
		}
	}

	.bottom-content-box {
		flex: 1;
		display: flex;

	}

	.right-btn {
		flex: 1;
		display: flex;
		justify-content: center;
		font-size: 28rpx;
		font-family: FrankNew-Medium,NotoSansSC-Medium ;
		.normal-btnStyle,
		.check-btnStyle {
			flex: 1;
			display: flex;
		}

		button {
			flex: 1;

			&.act {
				background-color: #000;
				color: #fff;
				font-size: 28rpx;
			}
		}

		.has-no-padding {
			width: 100%;

			button {
				flex: 1;
			}
		}

		.has-btn-padding {
			padding: 0 40rpx;
			width: 100%;

			.mult-btn {
				display: flex;

				button {
					flex: 1;
				}
			}

		}
	}

	.ts-part {
		position: relative;
		width: 654rpx;
		height: 148rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		.ts-btnBox {
			display: flex;
			/* flex: 1; */
			/* width: 100%; */
			overflow: hidden;
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-end;


		}

		.ts-btn1 {
			background-color: #fff;
			color: #1a1a1a;
			border: 6rpx solid #000000;
			line-height: 68rpx;
			font-family: FrankNew-Medium,NotoSansSC-Medium ;
		}

		.ts-btn2 {
			margin-left: 16rpx;
			background-color: #1a1a1a;
			color: #fff;
			font-family: FrankNew-Medium,NotoSansSC-Medium ;
		}

		button {

			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			margin: 0;
			border-radius: 24px 8px 24px 24px;
			font-size: 28rpx;
			font-family: FrankNew-Medium,NotoSansSC-Medium ;

			&.btn1 {

				&.act {
					background-color: #000;
					color: #fff;
					font-size: 28rpx;
				}
			}

			;

			&.act {
				background-color: #000;
				color: #fff;
				font-size: 28rpx;
			}
		}

		.text-tip-block {
			box-sizing: border-box;
			position: absolute;
			top: -128rpx;
			left: -50rpx;
			height: 128rpx;
			line-height: 128rpx;
			background: #000;
			font-size: 28rpx;
			width: 754rpx;
			color: #FFF;
			padding: 0 58rpx;
			font-size: 28rpx;
			font-family: 'NotoSansSC-Medium';
			letter-spacing: 0px;
			background-color: #000;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.text-tip {
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 28rpx;
				font-family: FrankNew-Medium,NotoSansSC-Medium ;
			}
		}
	}
</style>